<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="password_top">
      <view
        class="password"
        style="display: flex; justify-content: flex-start; align-items: center"
      >
        <input
          placeholder="输入开户姓名"
          v-model="account"
          style="font-size: 28rpx; flex: 2"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>

      <view class="password">
        <input
          placeholder="输入身份证号码"
          v-model="idcard"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="password">
        <input
          placeholder="输入银行卡号"
          v-model="bankcard"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>

      <view class="passwords">
        <input
          type="number"
          placeholder="输入银行卡预留手机号"
          v-model="bankcardphone"
          style="font-size: 28rpx; flex: 2"
          placeholder-style="font-size: 28rpx;"
        />
        <u-verification-code
          :seconds="seconds"
          ref="uCode"
          @change="codeChange"
        ></u-verification-code>
        <view style="display: flex; align-items: center">
          <view
            style="
              width: 2rpx;
              height: 30rpx;
              background-color: #262934;
              margin-right: 15rpx;
            "
          ></view>
          <text
            @click="getCode"
            style="color: #1FE7E7; font-size: 28rpx; white-space: normal"
            >{{ tips }}</text
          >
        </view>
      </view>
    </view>

    <view class="password_top" style="margin-top: 30rpx">
      <view class="password">
        <input
          placeholder="请填写获取的验证码"
          v-model="phoneCode"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
    </view>

    <view class="button" @click="Submit"> 确定 </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      account: "",
      bankcardphone: "",
      idcard: "",
      bankcard: "",
      phoneCode: "",
      tips: "",
      // refCode: null,
      seconds: 60,
      timer: false,
      ordernumber: "",
    };
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (!this.timer) {
        if (this.account == "") {
          this.$refs.uToast.show({
            title: "请填写开户姓名",
          });
          return;
        }

        if (this.idcard == "") {
          this.$refs.uToast.show({
            title: "请填写身份证号",
          });
          return;
        }
        if (this.bankcard == "") {
          this.$refs.uToast.show({
            title: "请填写银行卡号",
          });
          return;
        }
        if (this.bankcard.length < 16 || this.bankcard.length > 19) {
          this.$refs.uToast.show({
            title: "请填写正确银行卡号",
          });
          return;
        }
        if (this.bankcardphone == "") {
          this.$refs.uToast.show({
            title: "请填写银行卡预留手机号",
          });
          return;
        }
        if (this.bankcardphone == "") {
          this.$refs.uToast.show({
            title: "请填写银行卡预留手机号",
          });
          return;
        }
        if (!/^1[3456789]\d{9}$/.test(this.bankcardphone)) {
          this.$refs.uToast.show({
            title: "请填写正确手机号",
          });
          return;
        }
        let resa = await api.applyBindCard({
          query: {
            name: this.account,
            id_card_no: this.idcard,
            bank_no: this.bankcard,
            phone: this.bankcardphone,
          },
          method: "post",
        });
        if (resa.code == 0) {
          this.ordernumber = resa.data;
          this.$refs.uToast.show({
            title: resa.msg,
            type: "success",
          });
        } else {
          this.$refs.uToast.show({
            title: resa.msg,
            type: "error",
          });
          return;
        }
        this.timer = true;
        this.tips = this.seconds;
        var time = setInterval(() => {
          this.tips--;
          if (this.tips <= 0) {
            clearInterval(time);
            this.tips = "重新获取";
            this.timer = false;
          }
        }, 1000);
      } else {
        this.$refs.uToast.show({
          title: "已发送短信",
          // 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
          // type: 'success',
          // 如果不需要图标，请设置为false
          // icon: false
        });
      }
    },
    async Submit() {
      if (this.account == "") {
        this.$refs.uToast.show({
          title: "请填写开户姓名",
        });
        return;
      }

      if (this.idcard == "") {
        this.$refs.uToast.show({
          title: "请填写身份证号",
        });
        return;
      }
      if (this.bankcard == "") {
        this.$refs.uToast.show({
          title: "请填写银行卡号",
        });
        return;
      }
      if (this.bankcardphone == "") {
        this.$refs.uToast.show({
          title: "请填写银行卡预留手机号",
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.bankcardphone)) {
        this.$refs.uToast.show({
          title: "请填写正确手机号",
        });
        return;
      }
      if (this.phoneCode == "") {
        this.$refs.uToast.show({
          title: "请填写验证码",
        });
        return;
      }

      let res = await api.confirmBindCard({
        query: {
          request_num: this.ordernumber,
          code: this.phoneCode,
        },
        method: "post",
      });
      if (res.code == 0) {
        this.$refs.uToast.show({
          title: "绑定成功",
          type: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 500);
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
}
.password_top {
  border: 2rpx solid #262934;
  margin: 0 30rpx;
  background-color: $bg-color3;
  border-radius: 25rpx;
  position: relative;
  top: 50rpx;
  font-size: 28rpx;
}
.password {
  /* display: flex;
		justify-content: space-between;
		align-items: center; */
  color: #ffffff;
  margin: 20rpx 30rpx;
  padding: 5rpx 0;
  /* min-height: 50rpx; */
}
.passwords {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: 20rpx 30rpx;
  min-height: 50rpx;
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.button {
  position: relative;
  top: 100rpx;
  color: #ffffff;
  margin: 30rpx;
  height: 90rpx;
  color: $text-color4;
  background: $button;background-repeat: no-repeat;background-size: 100%;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
</style>
